import React, { useEffect, useState } from 'react'

interface Props {
    userName: string;
    // onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; // 函数类型 声明
    // 指定为 HTMLInputElement 的 ChangeEvent
    onNameUpdated: (newName: string) => void;
}

const NameEditComponent: React.FC<Props> = (props) => {
    const [editingName, setEditingName] = useState(props.userName);
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // 调用 onNameUpdated
        setEditingName(e.target.value)
        // props.onNameUpdated(editingName);
    }
    // 监听 input change,改变父 name
    // useEffect(() => {
    //     props.onNameUpdated(editingName);
    // }, [editingName])

    // 监听 button onClick change,改变父 name
    const onNameSubmit = () => {
        props.onNameUpdated(editingName);
    }
    return (
        <>
            {/* vscode 就是 用 ts 写出来的 */}
            {/* {props.userName} */}
            <input
                value={editingName}
                onChange={onChange}
            />
            <button onClick={onNameSubmit}>点击改变</button>
        </>
    )
}

export default NameEditComponent